<table>
  <tr>
    <td>X Length</td>
    <td colspan="3">
      <input class='xLength length' type="range" min="1.0" max="5.0" step="0.5" value="1.0" />
    </td>
  </tr>
  <tr>
    <td>Y Length</td>
    <td colspan="3">
      <input class='yLength length' type="range" min="1.0" max="5.0" step="0.5" value="1.0" />
    </td>
  </tr>
  <tr>
    <td>Z Length</td>
    <td colspan="3">
      <input class='zLength length' type="range" min="1.0" max="5.0" step="0.5" value="1.0" />
    </td>
  </tr>
<tr style="text-align: center;">
    <td></td>
    <td>X</td>
    <td>Y</td>
    <td>Z</td>
  </tr>
  <tr>
    <td>Center</td>
    <td>
      <input style="width: 50px" class='center' data-index="0" type="range" min="-1" max="1" step="0.1" value="0" />
    </td>
    <td>
      <input style="width: 50px" class='center' data-index="1" type="range" min="-1" max="1" step="0.1" value="0" />
    </td>
    <td>
      <input style="width: 50px" class='center' data-index="2" type="range" min="-1" max="1" step="0.1" value="0" />
    </td>
  </tr>
  <tr>
    <td>Rotation</td>
    <td>
      <input style="width: 50px" class='rotations' data-index="0" type="range" min="0.0" max="90.0" step="5.0" value="0.0" />
    </td>
    <td>
      <input style="width: 50px" class='rotations' data-index="1" type="range" min="0.0" max="90.0" step="5.0" value="0.0" />
    </td>
    <td>
      <input style="width: 50px" class='rotations' data-index="2" type="range" min="0.0" max="90.0" step="5.0" value="0.0" />
    </td>
  </tr>
  <tr>
  <td>
    <input class='reset' type="button" value="Reset" />
  </td>
  <td></td>
  <td></td>
  <td></td>
</tr>
</table>
